<template>
  <!-- 使用的时流体高度组件 -->
  <div class="table">
    <div class="titlebox">
      <div class="search">  <el-input v-model="input" placeholder="请输入电影名" style="width:200px" ></el-input>
      <el-button icon="el-icon-search" circle @click="searchMovie" style="margin-left:8px"></el-button>
    </div>
    <div class="video">
      <uploadVideo></uploadVideo>
    </div>
    <div class="upImg">
      <uploadImg></uploadImg>
    </div>
    </div>
  
    <el-table
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column align="center"
      fixed
      prop="id"
      label="ID"
      width="">
    </el-table-column>
    <el-table-column align="center"
      prop="title"
      label="电影名"
      width="">
    </el-table-column>
    <el-table-column align="center"
      prop="type"
      label="电影类型"
      width="">
    </el-table-column>
    <el-table-column align="center"
      prop="videoSrc"
      label="电影路径"
      width="">
    </el-table-column>
    <el-table-column align="center"
      prop="imgSrc"
      label="电影封面路径"
      width="">
    </el-table-column>
    <el-table-column align="center"
      fixed="right"
      label="操作"
      width="">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="handleEdit(scope.$index,tableData,scope.row)"
          type="text"
          size="small">
          修改
        </el-button>
        <el-button
          @click.native.prevent="deleteRow(scope.$index,tableData,scope.row)"
          type="text"
          size="small">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
<!-- 分页 -->

<div class="page">
<el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="this.currentPage"
    :page-sizes="[5, 10, 15, 20]"
    :page-size=this.pagesize
    layout="total, sizes, prev, pager, next, jumper"
    :total=this.total>
  </el-pagination>
</div>


  <!-- 对话框表单 -->
  <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="title" label-width="120px">
    <el-input v-model="form.title" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="type" label-width="120px">
    <el-input v-model="form.type" autocomplete="off"></el-input>
  </el-form-item>
    <!-- <el-form-item label="videoSrc" label-width="120px">
    <el-input v-model="form.videoSrc" autocomplete="off"></el-input>
   </el-form-item> -->
  
</el-form>
<div slot="footer" class="dialog-footer">
  <el-button @click="dialogFormVisible = false">取 消</el-button>
  <el-button type="primary"  @click="submit">确 定</el-button>
</div>
</el-dialog>

  </div>
 
</template>

<script>
import uploadImg from "../uploadImg.vue"
import uploadVideo from "../uploadVideo.vue"
   
export default {
    components:{
      uploadImg,
      uploadVideo
    },
     created(){
      this. getMovieDate()
     }
 


 ,
//  async updated(){
//     this.getUserDate()
//   },
    methods: {
  
  deleteRow(index, rows,currentRow) {
    // console.log(currentRow.id)
    let all=(this.total-1)
      let newPages=Math.ceil(all/this.pagesize)
      if(this.currentPage>newPages){
          this.handleCurrentChange(this.currentPage-1)
              index=index+this.currentPage*this.pagesize
              rows.splice(index,1);
        }else{
          index=index+(this.currentPage-1)*this.pagesize
        }


        this.$axios({
            url:this.$host+"/deletesMovie",
            method:"get",
            params:{
             
                id:currentRow.id
            }  
           
        }).then(resp=>{
          this. getMovieDate()
        })  
   
       
    },
    // 修改用户信息
    handleEdit(index,rows,currentRow){
      //点击修改打开对话框
       this.dialogFormVisible=true
       this.form=currentRow
       
    },
    // 上传修改信息
    submit(){
      this.dialogFormVisible=false
      console.log(this.form.id,this.form.title)
      this.$axios({
           url:this.$host+"/updateMovie",
           method:"get",
           params:{
              id:this.form.id,
              title:this.form.title,
              type:this.form.type,
             videoSrc:this.form.videoSrc
           }
      }).then(resp=>{
            console.log(resp.data)
      })
    },
    searchMovie(){
        //搜索指定电影的
        // console.log(this.input)
        this.$axios({
           url:this.$host+"/searchMovie",
           method:"get",
           params:{
             title:this.input
           }
        }).then(resp=>{
            // console.log(resp.data)
            if(resp.data.length>this.pagesize){
              // start=(this.currentPage-1)*this.pagesize
              //      last= this.currentPage*this.pagesize
              //      newArr=resp.data.slice(start,last)
              this.getMovieDate()
            }else{
              this.tableData=resp.data
            }
            
        })
    },
    // 分页
    getMovieDate(){
           this.$axios({
            url:this.$host+"/getMovieDate",
             method:"get",
             params:{
              currentPage:this.currentPage,
              pagesize:this.pagesize
               
             }
           }).then(resp=>{
            this.tableData=[] 
             this.tableData=resp.data[0]
             this.total=resp.data[1]
           })

     }
    ,
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize=val
      this. getMovieDate()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val
      this. getMovieDate()
    },
    
  },
 
    data() {
      return {
        tableData: [],
        // 修改对话框是否打开
        dialogFormVisible: false,
        form: {
       title: '',
        type: '',
        videoSrc:""
        ,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      input: ''
     ,
      currentPage:1,
      pagesize:5,
      total:0
     
   
      }
    }
  }
</script>
<style scoped>
.video{
  color: blue;
  margin-left: 10px;
  margin-top: 8px;
}
.table{
  margin-top: 80px; 
 
}
.search{
   margin-left: 120px;
   margin-bottom: 20px;
}
.page{
       margin-top:35px;
       margin-left: 70px;
      
}
.titlebox{
    display: flex;
}
.upImg{
   color: blue;
   position: relative;
   right: -920px;
   top: 18px;
}
</style>